<!--  -->
<template>
  <div class="mask">
    <template v-if="['pdf'].includes(suffix)">
      <PDFView :pdfUrl="resourceUrl" />
      <!-- <pdfView :url="resourceUrl" :page="1"></pdfView> -->
    </template>
    <iframe
      v-else-if="['ppt', 'pptx', 'doc', 'docx'].includes(suffix)"
      style="width: 100%; height: 100%"
      :src="'https://view.officeapps.live.com/op/embed.aspx?src=' + resourceUrl"
      frameborder="0"
    ></iframe>
    <div class="video-box" v-else-if="['mp4', 'wav'].includes(suffix)">
      <video class="prew-video" :src="resourceUrl" controls></video>
    </div>
  </div>
</template>

<script>
import PDFView from "./components/pdfPreview.vue";

export default {
  data() {
    return {
      suffix: "",
      resourceUrl: "",
      mobileType: 1,
      page: 2,
      state: {
        source: "", //预览pdf文件地址
        pageNum: 1, //当前页面
        scale: 1, // 缩放比例
        numPages: 0, // 总页数
      },
    };
  },
  components: {
    PDFView,
  },
  mounted() {
    this.getMobile();
    this.getOperateCheck();
  },
  methods: {
    getMobile() {
      let userAgent = navigator.userAgent;
      if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
        this.mobileType = 2;
      }
    },
    getOperateCheck() {
      const id = this.$route.query.id;
      const params = { id: id };
      this.$http
        .getOperateCheck(params)
        .then((res) => {
          if (res.flag == 0) {
            const path = res.data.path;
            this.suffix = path ? this.ossUrl(path).split(".").pop() : "";
            this.resourceUrl = path;
            document.title = res.data.resourceName;
          }
        })
        .catch((err) => {
          alert(err.response.data.message);
        });
    },
    ossUrl(val) {
      const img = val.split("?")[0].split("com").pop();
      return img;
    },
  },
};
</script>

<style lang='scss' scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
}
.video-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.prew-video {
  width: 100%;
}
</style>
